<template>
	<view class="content">
		<view class="myForm">
			<u--form labelPosition="left" :model="myForm" :rules="rules" ref="uForm">
				<u-form-item label="原始密码" labelWidth="80" prop="oldPwd" borderBottom ref="item1">
					<u-code-input v-model="myForm.oldPwd" hairline mode="line" dot :maxlength="6"></u-code-input>
				</u-form-item>
				<u-form-item label="新密码" labelWidth="80" prop="newPwd" borderBottom ref="item2">
					<u-code-input v-model="myForm.newPwd" hairline mode="line" dot :maxlength="6"></u-code-input>
				</u-form-item>
				<u-form-item label="确认密码" labelWidth="80" prop="confirmPwd" borderBottom ref="item2">
					<u-code-input v-model="myForm.confirmPwd" hairline mode="line" dot :maxlength="6"></u-code-input>
				</u-form-item>
				<u-form-item class="myBtn">
					<u-button type="primary" shape="circle" text="设置" @click="changePwd"></u-button>
				</u-form-item>
			</u--form>
		</view>
	</view>
</template>

<script>
	import {
		changePassword
	} from '@/config/api.js'
	export default {
		data() {
			return {
				myForm: {
					oldPwd: '',
					newPwd: '',
					confirmPwd: ''
				},
				rules: {
					'oldPwd': [{
						type: 'string',
						required: true,
						message: '请填写原始密码',
						trigger: ['blur', 'change']
					}, {
						min: 6,
						max: 20,
						message: '密码长度必须在6-20个字符之间'
					}],
					'newPwd': [{
							type: 'string',
							required: true,
							message: '请填写新的密码',
							trigger: ['blur', 'change']
						}, {
							min: 6,
							max: 20,
							message: '密码长度必须在6-20个字符之间'
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								//return uni.$u.test.mobile(value);
								//console.log("this.myForm.newPwd,{}, value ==>{}",this.myForm.newPwd,value)
								return this.myForm.oldPwd != value
							},
							message: '新密码不能与原始密码一样',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					'confirmPwd': [{
							type: 'string',
							required: true,
							message: '请填写确认密码',
							trigger: ['blur', 'change']
						}, {
							min: 6,
							max: 20,
							message: '密码长度必须在6-20个字符之间'
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								//return uni.$u.test.mobile(value);
								console.log("this.myForm.newPwd,{}, value ==>{}", this.myForm.newPwd, value)
								return this.myForm.newPwd == value
							},
							message: '确认密码与新密码不一致',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					]
				},
			}
		},
		methods: {
			changePassword() {
				this.$refs.uForm.validate().then(res => {
					console.log('校验通过')
					let data = {
						oldPwd: this.myForm.oldPwd,
						newPwd: this.myForm.newPwd,
					}
					setPwd(data).then((res) => {
						if (res.code == 200) {
							uni.$u.toast('修改成功')
							setTimeout(() => {
								uni.navigateBack();
							}, 1000);
						} else {
							uni.$u.toast(res.msg)
						}
					})
				})
			}
		}
	}
</script>

<style scoped>
	.content {
		padding: 20px;
	}

	.myBtn {
		margin-top: 30px;
	}
</style>